<template>
  <div class="main">
      <el-row>
          <el-col style="background-color:#f9f9f9" :span='6'>
              <sliderBar @btn='getId' :list ='list' />
          </el-col>
          <el-col :span='18'>
              <el-row style="height:238px">
                  <topRight :id ='id' :list="list" ref="topRight" />
              </el-row>
              <el-row>
                  <musicTab :id='id' />
              </el-row>
          </el-col>
      </el-row>
  </div>
</template>

<script>
import sliderBar from '../RankingList/components/sliderBar.vue'
import topRight from './components/topRight.vue'
import musicTab from './components/musicTab.vue'
import { getDetailList } from '@/api/RankingList'

export default {
  name: 'RankingList',
  components: {
    sliderBar,
    topRight,
    musicTab
  },
  data () {
    return {
      list: [],
      id: parseInt(this.$route.params.id) || 19723756
    }
  },
  created () {
    this.getDetailList()
  },
  methods: {
    async getDetailList () {
      const { data } = await getDetailList()
      this.list = data.list
    },
    getId (id) {
      this.id = id
    }
  }

}
</script>

<style scoped>
.main{
    width: 980px;
    height: 500px;
    /* background-color: skyblue; */
}

</style>
